<template>
	<view class="container">
		<view class="login-form">
			<!-- 基础表单校验 -->
			<uni-forms ref="loginRef" :rules="rules" :modelValue="loginForm">
				<uni-forms-item name="userName">
					<uni-easyinput :style="inputStyle" prefixIcon="person" v-model="loginForm.userName" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput prefixIcon="locked" type="password" v-model="loginForm.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<button type="default" @click="onclick('loginRef')">登录</button>
			<!-- 忘记密码 -->
			<view class="forget-password">忘记密码?</view>
		</view>
		<!-- 没有账号，请注册 -->
		<view class="to-register">还没有账号？<text @click="toRegister">马上注册!</text></view>

	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				//输入框的样式
				inputStyle:{
					color:"#55aa00",
					borderColor:"#55aa00"
				},
				loginForm: {
					userName: 'zhangyihu',
					password: '123456'
				},
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							format: 'number',
							errorMessage: '密码只能为数字'
						}]
					}
				},
			}
		},
		methods: {
			...mapMutations(['saveToken','saveUserInfo']),
			onclick(ref) {
				this.$refs[ref].validate().then(res => {
					this.loginSubmit(res)
					//请求后台登录接口
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			async loginSubmit(res) {
				const response = await this.$api.user.login(res);
				if(response.code === 200){
					this.saveToken(response.data);
					// 这里再获取用户全部的信息，或者改造登录接口
					this.getUserInfo(response.data.userId) 
					//获取当前页面栈的数量 
					console.info(getCurrentPages().length)
					if(getCurrentPages().length <= 1){
						uni.switchTab({
							url:'/pages/personal/personal'
						})
					}else{
						// 登录成功后返回上级页面
						uni.navigateBack()
					}
				
				}
			},
			async getUserInfo(userId){
				const response = await this.$api.user.getUserInfo(userId);
				console.info(response.data)
				if(response.code == 200){
					this.saveUserInfo(response.data.userInfo);
				}
			},
			toRegister(){
				uni.navigateTo({
					url:"/pages/personal/register"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;
		width: 100vw;
		background: url('https://file.boyoulsh.com/ywh/1.png');
		background-size: cover;

		.login-form {
			position: relative;
			top: 450upx;
			margin: 0 100upx;

			button {
				background: green;
				border-radius: 45upx;
			}

			.forget-password {
				color: #55aa00;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
			}
		}

		.to-register {
			position: absolute;
			bottom: 50upx;
			text-align: center;
			width: 100%;
			font-size: 30upx;

			text {
				color: #55aa00;
				font-size: 30upx;
			}
		}
	}
</style>